<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>自助续借-${fns:getConfig('productName')} </title>
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <script type="text/javascript">
        var FINAL_COUNT = ${fns:getDictValue('renew','selfCountDown' ,'20')}
    </script>
    <%@ include file="/WEB-INF/views/include/common.jsp" %>
    <%@ include file="/WEB-INF/views/include/countDown.jsp" %>
    <script>
        function reborrow(zlId, obj) {
            resetCount();
            $.ajax({
                type: "POST",
                url: "${cts}/renew_book.do",
                dataType: "json",
                data: {zlId: zlId},
                success: function (data) {
                    if (data.code == "0001") {
                        var continue_date = data.data;
                        $("#continue_date_" + zlId).html(continue_date);

                        $("#borrow_info_" + zlId).find(".date").html(continue_date);

                        $(obj).parent().html("<span style='display:block;margin-top: 10px;padding: 20px 0;font-size: 28px;'>续借成功!</span>");
                        layer.msg(data.msg);
                    }else{
                        $(obj).parent().html("<span  style='display:block;margin-top: 10px;padding: 20px 0;font-size: 28px;'>续借失败!</span>");
                        layer.msg(data.msg);
                    }
                }
            });
        }
    </script>
</head>
<body>
<div class="page-header">
    <div class="row">
        <div class="col-md-offset-1 col-md-9">
            <h1>智能图书馆借还系统</h1>
        </div>
    </div>
</div>

<c:if test="${not empty borrows}">
    <div class="row renew">
        <div class="main col-md-9">
            <div class="col-md-offset-1 col-md-10">
                <c:forEach items="${borrows}" var="borrow" varStatus="status">
                    <div class="alert alert-info" role="alert">
                        <div class="row">
                            <div class="col-md-1">
                                <c:if test="${empty borrow.bkBookinfo.tubiao}">
                                    <img src="${ctxStatic}/images/book-default-small.gif">
                                </c:if>
                                <c:if test="${not empty borrow.bkBookinfo.tubiao}">
                                    <img src="${borrow.bkBookinfo.tubiao}">
                                </c:if>
                            </div>

                            <div class="col-md-4">
                                <div class="cols">
                                    <span class="title">图书:</span><span>${borrow.bkBookinfo.bookname}</span>
                                </div>
                                <div class="cols">
                                    <span class="title">ISBN:</span><span>${borrow.bkBookinfo.isbn}</span>
                                </div>
                            </div>

                            <div class="col-md-5">
                                <div class="cols">
                                    <span class="title">借书日期:</span>
                                    <span><fmt:formatDate value="${borrow.borDate}" pattern="yyyy-MM-dd"/></span>
                                </div>
                                <div class="cols">
                                    <span class="title">还书日期:</span>
                                    <span id="continue_date_${borrow.zlId}"><fmt:formatDate value="${borrow.needRtnDate}" pattern="yyyy-MM-dd"/></span>
                                </div>
                            </div>
                            <div id="operate_div" class="col-md-2">
                                <button type="button" class="btn btn-info btn-lg" style="margin-top: 10px;padding: 20px 26px;font-size: 28px;"
                                        onclick="reborrow('${borrow.zlId}', this);">
                                    续借
                                </button>
                            </div>
                        </div>
                    </div>
                </c:forEach>
            </div>
        </div>
        <div class="col-md-3">
            <div class="col-md-10">
                <%@ include file="/WEB-INF/views/include/userInfo.jsp" %>
            </div>
            <div class="col-md-10">
                <%@ include file="/WEB-INF/views/include/borrowed.jsp" %>
            </div>
        </div>
    </div>
</c:if>

<c:if test="${empty borrows}">
    <div class="row">
        <div class="col-md-offset-2 col-md-8">
            <ul class="list-group" style="margin-top: 10%;">
                <li class="list-group-item active" style="height: 50px;"></li>
                <li class="list-group-item">
                    <div id="jumbotron" class="jumbotron">
                        <h1 id="gide_div" style="text-align: center">没有查询到可以续借的图书!</h1>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</c:if>

<%@ include file="/WEB-INF/views/include/footer.jsp" %>

</body>
</html>